import React from 'react';

/* 类式组件 */
// export default class DemoStateHook extends Component {
// 	state = {count: 0};

// 	add = () => {
// 		this.setState(state => {
// 			return {count: state.count + 1};
// 		});
// 	};

// 	render() {
// 		return (
// 			<div>
// 				<h1>当前总数:{this.state.count}</h1>
// 				<button onClick={this.add}>+1</button>
// 			</div>
// 		);
// 	}
// }

/* 函数式组件 */
export default function DemoStateHook() {
	/* 使用useState进行初始化state 
        两个属性
        1,定义的state
        2,修改此state的方法
    */
	const [count, setCount] = React.useState(0);
	const [name, setName] = React.useState('tom');
	const [sum, setSum] = React.useState(0);

	function add() {
		setCount(count + 1);
	}

	function change() {
		setName('jack');
	}

	/* 
		使用useEffect进行生命周期操作
		两个属性
		第一个为回调函数
			函数执行内容为组件挂载后的行为
			返回值为一个函数此函数为组件将要卸载的行为
		第二个为一个数组
			当不传第二个参数或者传入[]的时候只会在第一次render()后执行
			传入带有state的数组,,则会当state改变时重新调用此方法
	*/
	React.useEffect(() => {
		// 在组件挂载完成后执行
		let timer = setTimeout(() => {
			setSum(sum + 5);
		}, 500);
		// 返回函数为组件将要卸载时执行
		return () => {
			clearTimeout(timer);
		};
	}, [sum]);

	/* 
		自定义一个ref
	*/
	const myRef = React.useRef();

	function show() {
		alert(myRef.current.value);
	}

	return (
		<div>
			<h1>当前总数:{count}</h1>
			<h1>当前姓名: {name}</h1>
			<h1>当前记数:{sum}</h1>
			<input type="text" ref={myRef} />
			<button onClick={add}>+1</button>
			<button onClick={change}>改变姓名</button>
			<button onClick={show}>提示</button>
		</div>
	);
}
